<template>
  <div class="zm-filterBar zm-flex is-align-middle">
    <slot name="prefix"></slot>
    <div class="zm-flex__1 zm-flex">
      <div
        :class="{'is-active': item.active}"
        :key="i"
        class="zm-flex__1 zm-filterBar__item"
        v-for="(item, i) in filterList"
      >
        <span @click="onClickItem(item, i)">{{item.text}}</span>
      </div>
    </div>
    <slot name="suffix"></slot>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Mixins, Watch, Inject, Provide } from 'vue-property-decorator';

@Component({
  name: 'ZMFilterBar',
  components: {}
})
export default class App extends Vue {
  @Prop({ type: Array }) filterList;

  onClickItem(item, i) {
    this.$emit('click-item', item, i);
  }
  created() {}
  mounted() {}
}
</script>

<style lang="scss" scoped>
@include b(filterBar) {
  $barHeight: 1rem;
  height: $barHeight;
  line-height: 0.6rem;
  border-bottom: 1px solid $--border-color-base;
  & > .zm-flex__1 {
    text-align: center;
  }

  @include e(item) {
    height: $barHeight;
    & > span {
      position: relative;
      display: inline-block;
      height: $barHeight;
      line-height: $barHeight;
      &::after {
        content: '';
        position: absolute;
        display: none;
        width: 0.6rem;
        height: 3px;
        bottom: 1px;
        border-radius: 2px;
        left: 50%;
        transform: translate(-50%);
        background-color: $--color-primary;
      }
    }
    @include when(active) {
      & > span {
        color: $--color-primary;
        &::after {
          display: inline-block;
        }
      }
    }
  }
}
</style>
